<template>
  <div class="cart" :class="themeClass" :style="{minHeight: windowHeight}">
    <div class="cart-box">
      <div class="cart-header color-border-1">
        Basket
        <div class="info color-text-regular" @click="toCheckOut">
          Check Out
        </div>
      </div>

      <scroll-view
          scroll-y
          :style="{height: scrollHeight}"
      >
        <div class="cart-list color-border-1">
          <image mode="aspectFill" class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557421323320&di=07c7a8434a8c79f23955aed36b441665&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fproducts%2F20150423%2Ftooopen_46116371.jpg"></image>
          <div class="cart-info">
            <div class="cart-icon color-text-secondary">
              <van-icon name="cross" />
            </div>

            <div class="title">Red State</div>
            <div class="info">
              <div class="money color-text-regular">$555</div>
              <div class="sum color-text-secondary">82</div>
            </div>
          </div>
        </div>

        <div class="cart-list color-border-1">
          <image mode="aspectFill" class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557421323320&di=07c7a8434a8c79f23955aed36b441665&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fproducts%2F20150423%2Ftooopen_46116371.jpg"></image>
          <div class="cart-info">
            <div class="cart-icon color-text-secondary">
              <van-icon name="cross" />
            </div>

            <div class="title">Red State</div>
            <div class="info">
              <div class="money color-text-regular">$555</div>
              <div class="sum color-text-secondary">82</div>
            </div>
          </div>
        </div>

        <div class="cart-list color-border-1">
          <image mode="aspectFill" class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557421323320&di=07c7a8434a8c79f23955aed36b441665&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fproducts%2F20150423%2Ftooopen_46116371.jpg"></image>
          <div class="cart-info">
            <div class="cart-icon color-text-secondary">
              <van-icon name="cross" />
            </div>

            <div class="title">Red State</div>
            <div class="info">
              <div class="money color-text-regular">$555</div>
              <div class="sum color-text-secondary">82</div>
            </div>
          </div>
        </div>

        <div class="cart-list color-border-1">
          <image mode="aspectFill" class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557421323320&di=07c7a8434a8c79f23955aed36b441665&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fproducts%2F20150423%2Ftooopen_46116371.jpg"></image>
          <div class="cart-info">
            <div class="cart-icon color-text-secondary">
              <van-icon name="cross" />
            </div>

            <div class="title">Red State</div>
            <div class="info">
              <div class="money color-text-regular">$555</div>
              <div class="sum color-text-secondary">82</div>
            </div>
          </div>
        </div>

        <div class="cart-list color-border-1">
          <image mode="aspectFill" class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557421323320&di=07c7a8434a8c79f23955aed36b441665&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fproducts%2F20150423%2Ftooopen_46116371.jpg"></image>
          <div class="cart-info">
            <div class="cart-icon color-text-secondary">
              <van-icon name="cross" />
            </div>

            <div class="title">Red State</div>
            <div class="info">
              <div class="money color-text-regular">$555</div>
              <div class="sum color-text-secondary">82</div>
            </div>
          </div>
        </div>

        <div class="cart-list color-border-1">
          <image mode="aspectFill" class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557421323320&di=07c7a8434a8c79f23955aed36b441665&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fproducts%2F20150423%2Ftooopen_46116371.jpg"></image>
          <div class="cart-info">
            <div class="cart-icon color-text-secondary">
              <van-icon name="cross" />
            </div>

            <div class="title">Red State</div>
            <div class="info">
              <div class="money color-text-regular">$555</div>
              <div class="sum color-text-secondary">82</div>
            </div>
          </div>
        </div>
        <div class="cart-list color-border-1">
          <image mode="aspectFill" class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557421323320&di=07c7a8434a8c79f23955aed36b441665&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fproducts%2F20150423%2Ftooopen_46116371.jpg"></image>
          <div class="cart-info">
            <div class="cart-icon color-text-secondary">
              <van-icon name="cross" />
            </div>

            <div class="title">Red State</div>
            <div class="info">
              <div class="money color-text-regular">$555</div>
              <div class="sum color-text-secondary">82</div>
            </div>
          </div>
        </div>

        <div class="cart-list color-border-1">
          <image mode="aspectFill" class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557421323320&di=07c7a8434a8c79f23955aed36b441665&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fproducts%2F20150423%2Ftooopen_46116371.jpg"></image>
          <div class="cart-info">
            <div class="cart-icon color-text-secondary">
              <van-icon name="cross" />
            </div>

            <div class="title">Red State</div>
            <div class="info">
              <div class="money color-text-regular">$555</div>
              <div class="sum color-text-secondary">82</div>
            </div>
          </div>
        </div>

        <div class="cart-list color-border-1">
          <image mode="aspectFill" class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557421323320&di=07c7a8434a8c79f23955aed36b441665&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fproducts%2F20150423%2Ftooopen_46116371.jpg"></image>
          <div class="cart-info">
            <div class="cart-icon color-text-secondary">
              <van-icon name="cross" />
            </div>

            <div class="title">Red State</div>
            <div class="info">
              <div class="money color-text-regular">$555</div>
              <div class="sum color-text-secondary">82</div>
            </div>
          </div>
        </div>

      </scroll-view>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  components: {},
  data () {
    return {
    }
  },
  computed: {
    ...mapState('shop', {
      windowHeight: state => state.theme.windowHeight
    }),
    ...mapGetters('shop', {
      activeSetting: 'theme/activeSetting'
    }),
    themeClass: function () {
      return `theme-` + this.activeSetting.name
    },
    scrollHeight: function () {
      return `${parseInt(this.windowHeight) - 65}px`
    }
  },

  beforeCreate () {},
  created () {
    // 获取页面高度
    this.$store.dispatch('shop/theme/getSystemInfo')
  },
  beforeMount () {},
  mounted () {},
  onLoad (options) {},
  onReady () {},
  onShow () {},
  onHide () {},
  onUnload () {},
  /**
   * for other event handlers, please check https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
   */
  methods: {
    toCheckOut () {
      Megalo.navigateTo({ url: '/pages/goods/checkOut/index' })
    }
  }
}
</script>

<style lang="scss">
  .cart {
    .cart-box {
      margin: 0 15px;
      .cart-header {
        font-size: 16px;
        padding-bottom: 10px;
        margin-bottom: 15px;
        .info {
          float: right;
        }
      }
      .cart-list {
        display: flex;
        padding: 15px 0;
        .goods-img {
          display: block;
          width: 80px;
          height: 80px;
          border-radius: 8px;
        }
        .cart-info {
          position: relative;
          flex: 1;
          font-weight: bold;
          padding: 10px 0 10px 15px;
          .cart-icon {
            position: absolute;
            top: 30px;
            right: 0;
            font-size: 24px;
          }
          .title {
            font-size: 18px;
            margin-bottom: 10px;
          }
          .info {
            font-size: 16px;
            .money {
              display: inline-block;
            }
            .sum {
              display: inline-block;
              margin-left: 30px;
            }
          }
        }

      }
    }
  }
</style>
